﻿@{
    ViewBag.Title = "电话流水列表";
    Layout = "~/Areas/IM/Views/Shared/_Layout.cshtml";
}
<script src="~/Content/layer-v3.1.1/layer/layer.js"></script>
@section scripts{
    <script type="text/javascript">
        var subLayer; //add2021-07-03 plq

        //页面动态改动
        $(window).resize(function () {
            $.setGridWithSearchBar("#TableForm", "#SearchBar", "#grid");
        });

        //页面初始化
        $(document).ready(function () {
            DisableBackspace();
            $('#editWindow').window('close'); // 默认隐藏查看详细信息窗口
            //取台号
            $.EUIcombobox("#deskCode", {
                url: '@Url.Content("~/DD/TelRecord/GetDeskCode/")',
                valueField: 'ID',
                textField: 'Name',
                editable: false,
                OneOption: [{
                    ID: "",
                    Name: "--请选择--"
                }]
            });

            //add2021-07-02 plq 取结果类型
            $("#resultType").combobox({
                url: '@Url.Content("~/DD/TelRecord/GetCallResultType/")',
                method: 'POST',
                valueField: 'ID',
                textField: 'Name',
                multiple: true,
                editable: false,
                prompt: '--请选择--',
            });

            $('#start').datetimebox('setValue', '@ViewData["start"]');
            $('#end').datetimebox('setValue', '@ViewData["end"]');
            bindGrid();
            $.setGridWithSearchBar("#TableForm", "#SearchBar", "#grid");
        })


        //给easyui combobox增添清空按钮
        $.fn.combobox.defaults.icons = [{
            iconCls: 'icon-clear',
            handler: function (e) {
                $(e.handleObj.data.target).combobox('clear');
            }
        }];

        function bindGrid() {
            $('#grid').datagrid({
                width: 'auto',
                height: 'auto',
                fitColumns: true,
                striped: true,
                singleSelect: true,
                url: '@Url.Content("~/DD/TelRecord/DataLoad")',
                loadMsg: '数据加载中请稍后……',
                pagination: true,//启用分页
                rownumbers: true,//显示页码
                pageSize: 15,//设置 页容量
                pageList: [10, 15, 20],//设置 页容量下拉框
                queryParams: {
                    start: $('#start').datetimebox('getValue'),
                    end: $('#end').datetimebox('getValue'),
                    callNumber: $('#callNumber').textbox('getValue'),
                    workCode: $('#workCode').textbox('getValue'),
                    deskCode: $('#deskCode').combobox('getValue'),
                    resultType: $('#resultType').combobox('getValue'),
                    isCallOut: $('#isCallOut').combobox('getValue'),
                    isInLine: $('#isInLine').combobox('getValue'),
                    //isWireless: $('#isWireless').combobox('getValue')
                },
                columns: [[
                   { title: '电话号码', field: 'callPhone', width: '10%', align: "center", sortable: false },
                   { title: '是否呼出', field: 'isCallOut', width: '6%', align: "center", sortable: false },
                   { title: '来电时刻', field: 'callTime', width: '10%', align: "center", sortable: false },
                   { title: '震铃时刻', field: 'shockTime', width: '12%', align: "center", sortable: false },
                   { title: '调度员工号', field: 'workCode', width: '8%', align: "center", sortable: false },
                   { title: '姓名', field: 'name', width: '7%', align: "center", sortable: false },
                   { title: '台号', field: 'deskCode', width: '7%', align: "center", sortable: false },
                   { title: '结果类型', field: 'resultType', width: '7%', align: "center", sortable: false },
                   { title: '录音号', field: 'recordNumber', width: '16%', align: "center", sortable: false },
                   { title: '编码', field: 'telRecordcode', width: '5%', align: "center", sortable: false, hidden: true },
                   {
                       title: '录音播放', field: 'Record', width: '6%', align: "center", sortable: false,
                       formatter: function (value, row, index) {
                           if (row.recordNumber) {
                               var baseUrl = '@Url.Content("~/DD/AcceptEvent/MediaPlayer")';
                               return "<img id='message' width='20px' style='cursor: pointer; vertical-align:middle' src='" + '@Url.Content("~/Images/main/mediaplayer.png")' +
                               "' onclick =\"openNewPage('diag1','" + baseUrl + '?code=' + row.recordNumber + '&buildTime=' + dateToTime2(row.CallTime) + "','电话录音',650,250)\"/>";
                           } else {
                               return "";
                           }
                       }
                   },
                   {
                       title: '录音下载', field: 'DowLoad', width: '6%', align: "center", sortable: false,
                       formatter: function (value, row, index) {
                           if (row.recordNumber) {
                               return "<img id='message' width='14px' style='cursor: pointer; vertical-align:middle' src='" + '@Url.Content("~/images/main/download.png")' +
                                       "' onclick =\"downloadRecord('" + row.recordNumber + "','" + dateToTime2(row.CallTime) + "')\"/>";
                           } else {
                               return "";
                           }
                       }
                   }

                ]],
                toolbar: [
                    {
                        id: 'btnView',
                        text: '<span style="color:red;font-size:large">查看详细</span>',
                        iconCls: 'icon-redo',
                        handler: function () {
                            var selected = $('#grid').datagrid('getSelected');
                            if (selected) {
                                window.open('@Url.Content("~/DD/AcceptEvent/TelRecordList?telRecordCode=")' + selected.telRecordcode);
                            } else {
                                $.messager.alert('提示', '请选择数据行', 'info', function () {
                                });
                            }
                        }
                    }
                ],
                onLoadSuccess: function (data) { //add2023-08-07 plq 查询页 SQL 防注入提示
                    //console.log(data);
                    if (data.rows == "dangerousInfomation") {
                        $.messager.alert('提示', '输入内容不安全，请重新输入！', 'info');
                    }
                }
            })
            $.setGridWithSearchBar("#TableForm", "#SearchBar", "#grid");
        }


        //录音下载 add2021-07-03 plq
        function downloadRecord(RecordNumber, CallTime) {
            //获取录音文件路径
            $.ajax({
                url: '@Url.Content("~/DD/AcceptEvent/RecordingDownload")',
                data: {
                    RecordNumber: RecordNumber,
                    CallTime: CallTime,
                },
                success: function (data) {  //动态设置录音文件的路径
                    //console.log(data);
                    if (data.result) {
                        var filePath = data.data;
                        //console.log(filePath);
                        //var index = filePath.lastIndexOf("\/");
                        //fileName = filePath.substring(index + 1); //文件路径中提取文件名
                        window.location = '@Url.Content("~/DD/AcceptEvent/DownloadFile?strFileName=")' + RecordNumber + "&strFilePath=" + filePath;
                        //$.messager.alert('提示', '录音下载成功，文件保存为：' + data.data);
                    }
                    else {
                        $.messager.alert('提示', '录音下载失败');
                    }
                }
            });
        }

        //打开弹层页面
        function openNewPage(ID, arg, title, x, y) {
            subLayer = layer.open({ //弹层调用方式，都会返回一个index
                type: 2,
                title: title,
                maxmin: false,
                shadeClose: false, //点击遮罩关闭层
                area: [x + 'px', y + 'px'],
                //content: "../" + arg,
                content: arg,
                cancel: function () { //右上角关闭按钮触发的回调
                    //location.reload();
                }
            });
        }
        //关闭弹层页面并重新查询数据
        function autoclick() {
            layer.close(subLayer);
            lnk = document.getElementById("btnSearch");
            lnk.click();
        }
        //关闭弹层页面并重载页面
        function closeNewPage() {
            layer.close(subLayer);
            location.reload();
        }
        //只关闭弹层页面
        function closePage() {
            layer.close(subLayer);
        }

        //2020-06-10 sr function: 将后台返回的时间戳字符串（“/Date(1547082632000)/”）格式化为easyUI可解析的时间格式--带时分秒
        function dateToTime2(data) {
            if (data) {
                var endIndex = data.indexOf(')');
                var msec = parseInt(data.substring(6, endIndex));
                //console.log(msec);
                var time = new Date(msec);
                return dateFormat2(time);
            }

        }
        //2020-06-10 sr function: 将Date对象获取的时间格式化为easyUI可解析的时间格式---带时分秒
        function dateFormat2(time) {
            var YY = time.getFullYear();
            var MM = (time.getMonth() + 1) < 10 ? ("0" + (time.getMonth() + 1)) : (time.getMonth() + 1);
            var DD = time.getDate() < 10 ? ("0" + time.getDate()) : time.getDate();
            var hh = time.getHours() < 10 ? ("0" + time.getHours()) : time.getHours();
            var mm = time.getMinutes() < 10 ? ("0" + time.getMinutes()) : time.getMinutes();
            var ss = time.getSeconds() < 10 ? ("0" + time.getSeconds()) : time.getSeconds();
            return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
        }

        //查询
        function reSearch() {
            $('#grid').datagrid({
                pageNumber: 1,//点击查询返回第一页
                queryParams: {
                    start: $('#start').datetimebox('getValue'),
                    end: $('#end').datetimebox('getValue'),
                    callNumber: $('#callNumber').textbox('getValue'),
                    workCode: $('#workCode').textbox('getValue'),
                    deskCode: $('#deskCode').combobox('getValue'),
                    resultType: $('#resultType').combobox('getValue'),
                    isCallOut: $('#isCallOut').combobox('getValue'),
                    isInLine: $('#isInLine').combobox('getValue'),
                    //isWireless: $('#isWireless').combobox('getValue')
                }
            })
        }
    </script>
}
<div id="TableForm" class="easyui-layout" style="width:auto; height: auto; margin-left: auto; margin-right: auto">
    <div data-options="region:'center',title:'电话流水列表',iconCls:'icon-custom-Entry'">
        <div id="SearchBar" data-options="region:'center'" style="overflow: hidden; padding: 10px">
            <table style="width:99%" cellpadding="0" cellspacing="5" border="0">
                <tr>
                    <td align="right" valign="middle" width="9%">产生时刻：</td>
                    <td align="left" valign="middle" width="13%">
                        <input id="start" class="easyui-datetimebox" value=@ViewData["start"] style="width:150px" data-options="editable:false" />
                    </td>
                    <td align="right" valign="middle" width="9%">至：</td>
                    <td align="left" valign="middle" width="13%">
                        <input id="end" class="easyui-datetimebox" value=@ViewData["end"] style="width:150px" data-options="editable:false" />
                    </td>
                    <td align="right" valign="middle" width="9%">电话号码：</td>
                    <td align="left" valign="middle" width="13%">
                        <input id="callNumber" class="easyui-textbox" style="width:150px" />
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="middle" width="9%">工号：</td>
                    <td align="left" valign="middle" width="13%">
                        <input id="workCode" class="easyui-textbox" style="width:150px" />
                    </td>
                    <td align="right" valign="middle" width="9%">台号：</td>
                    <td align="left" valign="middle" width="13%">
                        <input id="deskCode" class="easyui-combobox" style="width:150px" />
                    </td>
                    <td align="right" valign="middle" width="9%">结果：</td>
                    <td align="left" valign="middle" width="13%">
                        <select class="easyui-combobox" style="width: 150px" id="resultType" data-options="panelHeight:160, editable:false">
                            @*<option value="">--请选择--</option>
                                <option value="0">正常</option>
                                <option value="1">早释</option>*@
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="middle" width="9%">是否呼出：</td>
                    <td align="left" valign="middle" width="13%">
                        <select class="easyui-combobox" style="width: 150px" id="isCallOut" data-options="panelHeight:80, editable:false">
                            <option value="">--请选择--</option>
                            <option value="0">呼入</option>
                            <option value="1">呼出</option>
                        </select>
                    </td>
                    <td align="right" valign="middle" width="9%">是否排队：</td>
                    <td align="left" valign="middle" width="13%">
                        <select class="easyui-combobox" style="width: 150px" id="isInLine" data-options="panelHeight:80, editable:false">
                            <option value="">--请选择--</option>
                            <option value="0">未排队</option>
                            <option value="1">排队</option>
                        </select>
                    </td>
                    @*<td align="right" valign="middle" width="9%">是否无线：</td>
                        <td align="left" valign="middle" width="13%">
                            <select class="easyui-combobox" style="width: 150px" id="isWireless" data-options="panelHeight:80, editable:false">
                                <option value="">--请选择--</option>
                                <option value="0">有线</option>
                                <option value="1">无线</option>
                            </select>
                        </td>*@
                    <td align="center" valign="middle" width="11%">
                        <a href="javascript:void(0)" id="btnsearch" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="reSearch()">查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div data-options="region:'center'" style="background: #fafafa; overflow: hidden">
            <table id="grid"></table>
        </div>
    </div>
</div>
